<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>waypoints中next方法的使用</title>
        <style>
            *{
                padding: 0;
                margin: 0;
                box-sizing:border-box;
            }
            ul{
                list-style:none;
            }
            .np-example{
                width: 1000px;
                margin: 0 auto;
            }
            .np-container{
                float: left;
                width: 50%;
                padding: 0 10px 0 0;
            }
            .np-left{
                margin: 10px 0;
                height: 100px;
                background-color: #555;
            }
            .np-right{
                height: 231px;
                margin: 16px 0;
                background-color: #aaa;
            }
            .np-current{
                background-color: green;
            }
            .np-previous{
                background-color: red;
            }
            .np-next{
                background-color: blue;
            }
            .waypoint{
                box-shadow:0 0 0 5px rgba(255,0,0,.5);
            }
        </style>
    </head>
    <body>
        <div class="np-example">
          <ul class="np-container">
            <li class="np-left waypoint np-next"></li>
            <li class="np-left waypoint np-current"></li>
            <li class="np-left waypoint"></li>
            <li class="np-left waypoint"></li>
            <li class="np-left waypoint"></li>
            <li class="np-left waypoint"></li>
            <li class="np-left waypoint"></li>
            <li class="np-left waypoint"></li>
            <li class="np-left waypoint"></li>
            <li class="np-left waypoint"></li>
            <li class="np-left waypoint"></li>
            <li class="np-left waypoint"></li>
            <li class="np-left waypoint"></li>
            <li class="np-left waypoint"></li>
            <li class="np-left waypoint"></li>
            <li class="np-left waypoint"></li>
            <li class="np-left waypoint"></li>
            <li class="np-left waypoint"></li>
            <li class="np-left waypoint"></li>
            <li class="np-left waypoint"></li>
            <li class="np-left waypoint"></li>
            <li class="np-left waypoint"></li>
            <li class="np-left waypoint"></li>
            <li class="np-left waypoint"></li>
            <li class="np-left waypoint"></li>
            <li class="np-left waypoint"></li>
            <li class="np-left waypoint"></li>
            <li class="np-left waypoint"></li>
            <li class="np-left waypoint"></li>
            <li class="np-left waypoint"></li>
            <li class="np-left waypoint"></li>
            <li class="np-left waypoint"></li>
            <li class="np-left waypoint"></li>
            <li class="np-left waypoint"></li>
            <li class="np-left waypoint"></li>
            <li class="np-left waypoint"></li>
          </ul>

          <ul class="np-container">
            <li class="np-right waypoint np-previous"></li>
            <li class="np-right waypoint np-current"></li>
            <li class="np-right waypoint np-next"></li>
            <li class="np-right waypoint"></li>
            <li class="np-right waypoint"></li>
            <li class="np-right waypoint"></li>
            <li class="np-right waypoint"></li>
            <li class="np-right waypoint"></li>
            <li class="np-right waypoint"></li>
            <li class="np-right waypoint"></li>
            <li class="np-right waypoint"></li>
            <li class="np-right waypoint"></li>
            <li class="np-right waypoint"></li>
            <li class="np-right waypoint"></li>
            <li class="np-right waypoint"></li>
            <li class="np-right waypoint"></li>
          </ul>
        </div>
        <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
        <!-- <script src="js/waypoints.min.js"></script> -->
        <script src="js/jquery.waypoints4.min.js"></script>
        <script>
        // var waypoint=new Waypoint({
        //     element:$(".np-left")
        // });
        $.each(['.np-left','.np-right'],function(index,className){
            var $elements=$(className);
            $elements.each(function(){
                new Waypoint({
                    element:this,
                    handler:function(direction){
                        var prevWaypoint=this.previous();
                        var nextWaypoint=this.next();
                        $elements.removeClass("np-previous np-next np-current");
                        $(this.element).addClass("np-current");
                        if(prevWaypoint){
                            $(prevWaypoint.element).addClass("np-previous")
                        }
                        if(nextWaypoint){
                            $(nextWaypoint.element).addClass("np-next");
                        }
                    },
                    group:className,
                    offset:'30%'
                })
            })
        })
        </script>
    </body>
</html>